<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给请求的head中添加自定义参数</title>
    <link rel="stylesheet" href="/static/css/sweetalert2.min.css">
    <style>

        .btn-default {
            border: 1px solid black;
            background: blue;
            color: white;
            padding: 2px;
            font-size: 10px;
            margin: 5px;
            border-radius: 5px;
        }

    </style>
</head>
<body>

<button class="btn-default" id="delete_request">发起异步delete请求</button>
<button class="btn-default" id="put_request">发起异步put请求</button>
<button class="btn-default" id="patch_request">发起异步patch请求</button>
<button class="btn-default" id="patch_request_json">发起异步patch请求(使用json传参)</button>
<button class="btn-default" id="put_request_json">发起异步put请求(使用json传参)</button>

</body>
<script src="/static/jquery-3.4.1.js"></script>
<script src="/static/js/sweetalert2.min.js"></script>
<script>

    let deleteRequestButton = $('#delete_request');

    $(function () {
        buttonInit();
    });

    function buttonInit() {
        deleteRequestButton.on("click", function () {
            deleteRequest();
        });
    }
    
    function deleteRequest() {
        swal({
            /*提示的大标题*/
            title: "确认删除?",
            /*删除的body区域*/
            text: "确认删除吗?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText : '确认',
            cancelButtonText : "取消",
        }).then(function (result) {
            //这里是点击按钮之后的回掉函数, 一般情况下载删除之后会需要刷新表格
            console.log(result);
            if(result.value) {
                let data = {
                    id: 120,
                    name: "熊二"
                };
                $.ajax({
                    /*
                     说明:
                        1. 这个方法会在ajax发起请求之前调用, 可以再head中添加一些参数.
                     */
                    beforeSend: function(XMLHttpRequest) {
                        XMLHttpRequest.setRequestHeader('customParameters', 110);
                    },
                    type: 'DELETE',
                    /*请求路径*/
                    url: "/api/restful",
                    /*请求携带的参数*/
                    data: data,
                    /*是否异步*/
                    async: true,
                    /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
                    contentType: 'application/x-www-form-urlencoded',
                    /*返回的数据类型*/
                    dataType:"json",//返回数据类型
                    /*请求成功的回调函数*/
                    success: function(data){
                        console.log('删除的返回值:', data);
                    }
                });
            } else {
                console.log("点击了取消按钮");
            }
        });
    }

</script>
</html>